<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html{
				padding: 0;
				margin: 0;
				background:#0A0F23;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="worldMap" style="width:100%; height: 100%;"></div>
		<p style="position: absolute;z-index: 999;left: 1340px;top: 640px;color: #FFF;font-size: 18px;">来自18个国家或地区</p>
		<script src="../../components/echarts-4.0.4.min.js"></script>
	    <script src="../../components/jquery-1.11.0.min.js"></script>
	    <script src="../../components/world.js"></script>
	    <script src="../../components/bmap.min.js"></script>
	    <script src="../../components/china.js"></script>
	    <script type="text/javascript">
	    	var worldChart = echarts.init(document.getElementById('worldMap'));
	    //	worldChart.showLoading();
	    	var v = [20, 6, 4, 5, 5, 4];
			var geoCoordMap = {
			    '西安': [108.95, 34.27],
			    '美国': [ -74.00597,40.71435],
			    '日本': [139.6932, 35.6898],
			    '韩国': [126.58, 37.33],
			    '古巴': [-82.23, 23.08],	//古巴
			    '英国': [-0.0741, 51.3028],
				'意大利': [12.2930, 41.53],
				'俄罗斯': [103.246, 61.752284],
			    '哈萨克斯坦': [ 45.351633,41.097107],
			    '香港': [114.186124, 22.293586],
			    '台湾':[	121.50,25.05],
			    '澳门':[113.33,22.13]
			};
			
			var data = [ {
			    name: '西安',
			    value: 30
			},{
			    name: '美国',
			    value: 8
			},{
			    name: '日本',
			    value: 20
			},{
			    name: '韩国',
			    value: 50
			},{
			    name: '古巴',
			    value: 18
			}, {
			    name: '英国',
			    value: 45
			}, {
			    name: '意大利',
			    value: 45
			},{
			    name: '俄罗斯',
			    value: 18
			}, {
			    name: '哈萨克斯坦',
			    value: 45
			}, {
			    name: '香港',
			    value: 45
			}, {
			    name: '台湾',
			    value: 40
			}, {
			    name: '澳门',
			    value: 8
			}];
			
			function formtGCData(geoData, data, srcNam, dest) {
			    var tGeoDt = [];
			    if (dest) {
			        for (var i = 0, len = data.length; i < len; i++) {
			            if (srcNam != data[i].name) {
			                tGeoDt.push({
			                    coords: [geoData[srcNam], geoData[data[i].name]]
			                });
			            }
			        }
			    } else {
			        for (var i = 0, len = data.length; i < len; i++) {
			            if (srcNam != data[i].name) {
			                tGeoDt.push({
			                    coords: [geoData[data[i].name], geoData[srcNam]]
			                });
			            }
			        }
			    }
			    return tGeoDt;
			}
			
			function formtVData(geoData, data, srcNam) {
			    var tGeoDt = [];
			    for (var i = 0, len = data.length; i < len; i++) {
			        var tNam = data[i].name
			        if (srcNam != tNam) {
			            tGeoDt.push({
			                name: tNam,
			                value: geoData[tNam],
			                symbolSize: v[i],
			                itemStyle: {
			
			                    normal: {
			                        color: '#f79906',	//红色  ffc100黄色
			                        borderColor: 'gold'
			                    }
			                }
			            });
			        }
			
			    }
			    tGeoDt.push({
			        name: srcNam,
			        value: geoData[srcNam],
			        symbolSize: 10,
			        itemStyle: {
			            normal: {
			                color: '#60ff44',	//蓝色
			                borderColor: '#fff'
			            }
			        }
			    });
			    return tGeoDt;
			}
			
			var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';			
			
			option = {
				title:{
					 text: ' 西安科技大市场接待来访地区示意图',
					 left: 'center',
			         top:"15%",
			         textStyle: {
			            color: '#fff',
			            fontSize: 22
			         }
				},
			    geo: {
			        name: 'Enroll distribution',
			        type: 'map',
			        map: 'world',
			        roam: true,
			        zoom: 1.23,
			        label: {
			            emphasis: {
			                show: false
			            }
			        },
			        itemStyle: {
			            normal: {
			                shadowBlur: 30,
			                shadowColor: 'rgba(0, 0, 0,0.1)',
			                areaColor: '#336c9c',	//区域蓝色
			                borderColor: '#8ce8e7'	//区域边线
			            },
			            emphasis: {
			                areaColor: '#8ce8e7'	//蓝黑色
			            }
			        }
			    },
			    series: [/*{
			
			        type: 'lines',
			        zlevel: 2,
			
			        effect: {
			            show: true,
			            period: 6,
			            trailLength: 0.1,
			            color: '#FFB973',
			            symbol: planePath,
			            symbolSize: 5
			        },
			        lineStyle: {
			            normal: {
			                color: '#FFB973',
			                width: 0,
			                opacity: 0.2,
			                curveness: 0
			            }
			        },
			        data: formtGCData(geoCoordMap, data, '西安', true)
			    }, */{
			
			        type: 'lines',
			        zlevel: 2,
			        effect: {
			            show: true,
			            period: 6,
			            trailLength: 0.1,
			            color: '#fff',	//飞机颜色 60ff44荧光绿
			            symbol: planePath,
			            symbolSize: 12
			        },
			        lineStyle: {
			            normal: {
			                color: '#65A2C2',	//迁入线条颜色
			                width: 0,
			                opacity: 0.4,
			                curveness: 0
			            }
			        },
			        data: formtGCData(geoCoordMap, data, '西安', false)
			    }, {
			        type: 'effectScatter',
			        coordinateSystem: 'geo',
			        zlevel: 2,
			        rippleEffect: {
			            period: 4,
			            scale: 4,
			            brushType: 'stroke',
			        },
			    //    layoutSize: 5,
			        label: {
			            normal: {
			                show: true,
			                position: 'right',
			                formatter: '{b}'
			            }
			        },
			        symbolSize: 5,
			        itemStyle: {
			            normal: {
			                color: '#fff',
			                borderColor: 'gold'
			            }
			        },
			
			
			        data: formtVData(geoCoordMap, data, '西安')
			    }]
			};
			worldChart.setOption(option);
			
	    </script>
	</body>
</html>
